<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,initial-scale=1.0,width=device-width" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>会员|众筹金</title>
    <link rel="stylesheet" type="text/css" href="../../../css/aui/aui.css" />
    <style>
        .aui-tab-item.aui-active {
            color: #0689FB;
            border-color: #0689FB;
        }

        .pay_goods .aui-list {
            background-image: none;
        }

        .pay_goods .aui-list .aui-list-item {
            padding-left: 0;
            margin: .5rem .75rem 0;
        }

        .pay_goods .aui-list .aui-list-item:last-child {
            margin: 0;
            border-bottom: 1.2rem solid #f6f6f6;
            padding: .5rem .75rem 0;
            background-image: none;
        }

        .pay_goods .aui-list .aui-list-item-inner {
            align-items: flex-end;
            -webkit-align-items: flex-end;
            padding-right: 0.3rem;
        }

        .pay_goods .aui-list .aui-list-item-right {
            color: black;
            max-width: 100%;
            font-size: 0.75rem;
        }

        .pay_goods .aui-list.aui-list-in .aui-list-item {
            background-position: 0 bottom;
        }

        .pay_type {
            margin-bottom: 3rem;
        }

        .pay_type img {
            width: 1rem;
            display: inline-block;
            vertical-align: sub;
            margin-right: .5rem;
        }

        .pay_type .aui-list {
            background-image: none;
        }

        .pay_type .aui-list .aui-list-item {
            padding-left: 0;
            margin: .5rem .75rem 0;
        }

        .pay_type .aui-list .aui-list-item-inner {
            align-items: center;
            -webkit-align-items: center;
            padding-right: 0.3rem;
        }

        .pay_type .aui-list .aui-list-item-right {
            max-width: 100%;
            font-size: 0.75rem;
        }

        .pay_type .aui-list.aui-list-in .aui-list-item {
            background-position: 0 bottom;
        }

        .pay_type .aui-list.aui-list-in .aui-list-item:last-child {
            background-image: none;
            border-bottom: .5rem solid #f6f6f6;
            margin: 0;
            padding: .5rem .75rem 0;
        }

        #footer {
            border-top: 1px solid #eee;
            box-sizing: border-box;
        }

        #footer .agreement {
            text-align: left !important;
            padding-left: 0.75rem;
            font-size: 0.7rem;
        }

        #footer .aui-radio {
            width: 0.9rem;
            height: 0.9rem;
            margin-right: .3rem;
        }

        .aui-mask {
            z-index: 99
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="aui-tab" id="tab">
            <div class="aui-tab-item aui-active">会员费</div>
            <div class="aui-tab-item">众筹金</div>
        </div>
        <div class="tab-item-content">

            <div class="tab-content aui-content pay_goods">
                <ul class="aui-list aui-list-in">
                    <li class="aui-list-item">
                        <div class="aui-list-item-inner" style="padding-bottom:0.3rem;">
                            <div class="aui-list-item-title">会员费<span v-if="memberInfo.order_status == 2" class="aui-text-danger">(已支付)</span></div>
                            <div class="aui-list-item-right">￥{{memberInfo.order_price}}</div>
                        </div>
                    </li>
                </ul>
            </div>

            <div class="tab-content aui-content pay_goods">
                <ul class="aui-list aui-list-in">
                    <li class="aui-list-item">
                        <div class="aui-list-item-inner" style="padding-bottom:0.3rem;">
                            <div class="aui-list-item-title">众筹金<span v-if="insureTreatyInfo.order_status == 2" class="aui-text-danger">(已支付)</span></div>
                            <div class="aui-list-item-right">￥{{insureTreatyInfo.order_price}}</div>
                        </div>
                    </li>
                </ul>
            </div>

        </div>

        <div v-if="(memberInfo.order_status == 1 && type == 1) || (insureTreatyInfo.order_status == 1 && type == 2)">

            <div class="pay_type">
                <ul class="aui-list aui-list-in">
                    <li class="aui-list-item">
                        <div class="aui-list-item-inner">
                            <div class="aui-list-item-title"><img src="../../../image/icon/weixin.png" alt="">微信支付</div>
                            <div class="aui-list-item-right"><input class="aui-radio" type="radio" value="2" v-model="info.pay_types"></div>
                        </div>
                    </li>
                    <li class="aui-list-item">
                        <div class="aui-list-item-inner">
                            <div class="aui-list-item-title"><img src="../../../image/icon/zhifubao.png" alt="">支付宝支付</div>
                            <div class="aui-list-item-right"><input class="aui-radio" type="radio" value="3" v-model="info.pay_types"></div>
                        </div>
                    </li>
                    <li class="aui-list-item">
                        <div class="aui-list-item-inner">
                            <div class="aui-list-item-title"><img src="../../../image/icon/yue.png" alt="">余额支付</div>
                            <div class="aui-list-item-right"><span style="color:black;margin-right:.4rem;">￥{{userInfo.wallet_balance}}</span><input class="aui-radio" type="radio" value="1" v-model="info.pay_types"></div>
                        </div>
                    </li>
                </ul>
            </div>

            <footer class="aui-bar aui-bar-tab" id="footer">
                <div class="aui-bar-tab-item agreement" style="width:auto;">
                    <label><input class="aui-radio" type="checkbox" v-model="agreement.agreementStatus">阅读并同意</label>
                    <span style="color:#0689FB;" @click="open_agreement()">{{agreement.name}}</span>
                </div>
                <div class="aui-bar-tab-item aui-bg-danger aui-text-white" @click="pay()" style="width: 5rem;">立即支付</div>
            </footer>

        </div>

    </div>
</body>
<script src="../../../script/api.js" charset="utf-8"></script>
<script src="../../../script/aui/aui-tab.js" charset="utf-8"></script>
<script src="../../../script/aui/aui-dialog.js" charset="utf-8"></script>
<script src="../../../script/common/jquery-3.3.1.min.js" charset="utf-8"></script>
<script src="../../../script/common/check.js" charset="utf-8"></script>
<script src="../../../script/common/common.js" charset="utf-8"></script>
<script src="../../../script/common/config.js" charset="utf-8"></script>
<script src="../../../script/common/vue.min.js" charset="utf-8"></script>
<script>
    apiready = function() {
        api.parseTapmode();

        vm.init();
    }

    var vm = new Vue({
        el: "#app",
        data: {
            userInfo: {},
            memberInfo: {},
            insureTreatyInfo: {},
            type: 1,
            agreement: {
                name: '会员费协议',
                agreementStatus: false
            },
            info: {
                user_id: '',
                order_price: '',
                pay_types: 1,
                pay_pass: 0
            }
        },
        methods: {
            init() {
                this.userInfo = get_local('userInfo');
                this.info.user_id = this.userInfo.user_id;
                this.gerUserInfo();
                this.tab();
                this.getMemberInfo();
                this.getInsureTreatyInfo();
            },
            gerUserInfo() {
                var that = this;
                var userInfo = get_local('userInfo');
                // 获取用户信息--信息不完善
                _ajax(Config.api.UserGetUser, {
                    user_id: userInfo.user_id
                }, function(ret) {
                    if (ret.code === 200) {
                        ret.data.user_id = userInfo.user_id;
                        that.userInfo = ret.data;
                        set_local('userInfo', that.userInfo);
                        that.userInfo = get_local('userInfo');
                    }
                });
            },
            getMemberInfo() {
                var self = this;
                _ajax(Config.api.AuthUserIsUserPay, {
                    user_id: self.userInfo.user_id
                }, function(res) {
                    if (res.code === 200 || res.code === 201) {
                        self.memberInfo = res.data;
                    }
                });
            },
            getInsureTreatyInfo() {
                var self = this;
                _ajax(Config.api.InsureUserIsUserPay, {
                    user_id: self.userInfo.user_id
                }, function(res) {
                    if (res.code === 200 || res.code === 201) {
                        self.insureTreatyInfo = res.data;
                    }
                });
            },
            pay() {
                if (this.agreement.agreementStatus === false) {
                    $toast('请仔细阅读协议并同意');
                    return;
                }
                if (this.info.pay_types == 1 && (this.userInfo.wallet_balance * 100 < this.info.order_price * 100)) {
                    $toast('余额不足');
                    return false;
                }

                if (this.info.pay_types == 1) {
                    var self = this;
                    var dialog = new auiDialog({});
                    dialog.prompt({
                        title: "支付密码",
                        text: '请输入支付密码',
                        type: 'password',
                        buttons: ['取消', '确定']
                    }, function(ret) {
                        if (ret.buttonIndex == 2) {
                            if (ret.text.length != 6) {
                                $toast('请输入六位数密码');
                                return false;
                            }
                            self.info.pay_pass = ret.text;
                            self.addOrder();
                        }
                    })
                } else {
                    this.info.pay_pass = 0;
                    this.addOrder();
                }
            },
            addOrder() {
                var self = this;

                if (self.info.pay_types == 1 && (this.userInfo.wallet_balance * 100 < this.info.order_price * 100)) {
                    $toast('余额不足');
                    return;
                }

                if (this.type == 1) {
                    this.info.order_price = this.memberInfo.order_price;
                    _ajax(Config.api.AuthUserGoPay, self.info, function(res) {
                        console.log(JSON.stringify(res));
                        if (res.code === 200) {
                            if (self.info.pay_types == 1) {
                                self.paySuccess();
                            } else if (self.info.pay_types == 2) {
                                self.wxPay(res.data);
                            } else if (self.info.pay_types == 3) {
                                self.aliPay(res.data.orderInfo);
                            }
                        } else {
                            $toast(res.msgs);
                        }
                    })
                } else if (this.type == 2) {
                    this.info.order_price = this.insureTreatyInfo.order_price;
                    console.log(JSON.stringify(self.info));
                    _ajax(Config.api.InsureUserGoPay, self.info, function(res) {
                        console.log(JSON.stringify(res));
                        if (res.code === 200) {
                            if (self.info.pay_types == 1) {
                                api.execScript({
                                    name: 'main',
                                    frameName: 'my',
                                    script: 'vm.gerUserInfo()'
                                });
                                self.paySuccess();
                            } else if (self.info.pay_types == 2) {
                                self.wxPay(res.data);
                            } else if (self.info.pay_types == 3) {
                                self.aliPay(res.data.orderInfo);
                            }
                        } else {
                            $toast(res.msgs);
                        }
                    })
                }
            },
            tab() {
                var self = this;

                $(".tab-content").eq(self.type - 1).show().siblings(".tab-content").hide();
                var tab = new auiTab({
                    element: document.getElementById("tab"),
                    index: self.type,
                    repeatClick: false
                }, function(ret) {
                    self.type = ret.index;
                    self.agreement.agreementStatus = false;
                    switch (self.type) {
                        case 1:
                            self.agreement.name = '会员费协议';
                            break;
                        case 2:
                            self.agreement.name = '众筹金协议';
                            break;
                        default:
                    }
                    $(".tab-content").eq(self.type - 1).show().siblings(".tab-content").hide();
                });
            },
            wxPay(data) {
                var that = this;
                var wxPay = api.require('wxPay');
                wxPay.payOrder(data, function(ret, err) {
                    if (ret.status) {
                        that.paySuccess();
                    } else {
                        // var errInfo = {
                        //     '1': 'apiKey值非法',
                        //     '-1': '未知错误，可能的原因：签名错误、未注册APPID、项目设置APPID不正确、注册的APPID与设置的不匹配、其他异常等',
                        //     '-2': '用户取消，发生场景：用户不支付了，点击取消，返回APP',
                        // }
                        // $toast(errInfo[err.code] + ' 错误码：' + err.code);
                        $toast('支付失败，请尝试其他方式支付' + err.code);
                    }
                });
            },
            aliPay(orderInfo) {
                var that = this;
                var aliPay = api.require('aliPay');
                aliPay.payOrder({
                    orderInfo: orderInfo
                }, function(ret, err) {
                    if (ret.code == 9000) {
                        that.paySuccess();
                    } else {
                        // var errInfo = {
                        //     '8000': '正在处理中，支付结果未知（有可能已经支付成功），请查询商户订单列表中订单的支付状态',
                        //     '4000': '订单支付失败',
                        //     '5000': '重复请求',
                        //     '6001': '用户中途取消支付操作',
                        //     '6002': '网络连接出错',
                        //     '6004': '支付结果未知（有可能已经支付成功），请查询商户订单列表中订单的支付状态',
                        // }
                        // $toast(errInfo[ret.code] + ' 错误码：' + ret.code);
                        $toast('支付失败，请尝试其他方式支付' + ret.code);
                    }
                });
            },
            paySuccess() {
                if (this.type == 1) {
                    $toast('支付会员费成功');
                    this.memberInfo.order_status = 2;
                } else if (this.type == 2) {
                    $toast('支付保障金成功');
                    this.insureTreatyInfo.order_status = 2;
                }
            },
            open_agreement() {
                if (this.type == 1) {
                    open_w('arc_arc_win', '../../arc/arc_arc_win.html', {
                        title: '会员费协议',
                        url: Config.api.NewsMemberTreaty
                    });
                } else if (this.type == 2) {
                    open_w('arc_arc_win', '../../arc/arc_arc_win.html', {
                        title: '众筹金协议',
                        url: Config.api.NewsInsureTreaty
                    });
                }
            }
        }
    })
</script>

</html>
